<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
    <style>
        /*
        通配选择器：
            作用： 选中页面中的所有元素
            语法： *{}
        */
        * {
            margin-left: 100px;
        }
        /*
        元素选择器：
            语法： 标签名 {}
            示例： p{}  h1{}   div{}
        */
        h1 {
            color: red;
        }
        p {
            color: blue;
        }

        /*
        id选择器：
            作用： 根据元素的id属性选中一个元素 (id不能重复)
            语法： #id属性值{}
            示例： #line3 {}
        */
        #line3 {
            color: coral;
            font-weight: bold;
        }

        /*
        class选择器：
            作用： 根据元素的class属性选中多个元素
            语法： .class属性值{}
            示例： .line4 {}
        */
        .line4 {
            color: cyan;
            font-weight: bold;
        }
        .line5 {
            color: blueviolet;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="line3">少小离家老大回</p>
    <p class="line4">少小离家老大回</p>
<!--    多个class名用空格隔开-->
    <p class="line4 line5">少小离家老大回</p>
    <p class="line4 line5">少小离家老大回</p>
</body>
</html>